<template>
	<view class="container-vnode"
		style="">
		<view class="main">
			<view class="income" @click="$fun.jump(`/pages/profit/profit`)">
				<view class="income-item flex">
					<view class="lt">
						<image src="@/static/vnode/currency.png" mode=""></image>
					</view>
					<view class="rt">
						<view class="title">{{$t('vnode.name1')}}</view>
						<view class="num">{{dayincome}}</view>
					</view>
				</view>
				<view class="income-item flex">
					<view class="lt">
						<image src="@/static/vnode/currency.png" mode=""></image>
					</view>
					<view class="rt">
						<view class="title">{{$t('vnode.name2')}}</view>
						<view class="num">{{totalincome}}</view>
					</view>
				</view>
			</view>
			<swiper :indicator-dots="true" indicator-color='#fff' indicator-active-color='#007aff' :interval="3000" :duration="1000" style="height: 90vh;">
				<swiper-item v-for="(item,index) in Product" :key="index">
					<view class="">
						<view class="release">
							<view class="release-text">
								{{$t('vnode.name3')}}
							</view>
							<u-line-progress :percentage="item.num" activeColor="#23b2ff"></u-line-progress>
							<view class="flex-between" style="font-size: 20rpx;color: rgba(255, 255, 255, 0.6);">
								<view style="color: #23b2ff;">
									{{(item.amount - item.balance).toFixed(2)}}
								</view>
								<view class="">
									{{item.amount}}
								</view>
							</view>
						</view>
						<view class="box">
							<view class="machine">
								<view class="svga" v-if="item.itemdata > 20">
									<view class="content" style="height: 610rpx">
										<l-svga src="/static/vnode.svga"></l-svga>
									</view>
								</view>
								<!-- v-if="Product && !((Product.end_time * 1000) >= time)" @tap="handleMachine" -->
								<view class="electric" @tap="handleMachine(item.id)">
									<view class="line">
										<u-line-progress :percentage="item.itemdata" activeColor="#00A3FF"></u-line-progress>
									</view>
									<view class="img" v-if=" item.itemdata < 20">
										<image src="@/static/vnode/click.png" mode=""></image>
									</view>
									<view class="ele-text" v-if=" item.itemdata < 20">{{$t('vnode.name4')}}</view>
								</view>
								<image :src="item ? $fun.imgUrl(item.image) : image1" mode=""></image>
								<!-- <image :src="$fun.imgUrl(Product.image)" mode="" v-else></image> -->
								<view class="num">{{ item.name}}</view>
							</view>
							<view class="button" @tap="$fun.jump('/pageC/robot/robot')" style="position: relative;">
								<image src="@/static/button.png" mode="" ></image>
								<view class="button-text">
									{{$t('vnode.name14')}}
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item v-if="Product.length==0">
					<view class="box">
						<view class="machine">
							<image :src="image1" mode=""></image>
						</view>
						<view class="button" @tap="$fun.jump('/pageC/robot/robot')" style="position: relative;">
							<image src="@/static/button.png" mode="" ></image>
							<view class="button-text">
								{{$t('vnode.name14')}}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			
			
		</view>
		<u-popup :show="isPopup" @close="closePopup" @open="openPopup" mode="bottom" :round="10" closeable>
			<view class="electric-box">
				<view class="title">{{$t('vnode.name5')}}</view>
				<view class="duration">
					<view class="title">{{$t('vnode.name6')}}</view>
					<u-radio-group v-model="radiovalue1" placement="column" @change="handleChange">
						<view class="duration-box flex-between">
							<view class="duration-item" v-for="(item,index) in electricityList" :key="item.id">
								<view class="lt">
									<view class="day">
										{{item.name}}
									</view>
									<view class="money">
										{{item.money}}
									</view>
								</view>
								<view class="rt">
									<u-radio size="14" activeColor="#ff4100" :name="item.id"></u-radio>
								</view>
							</view>
						</view>
					</u-radio-group>
				</view>
				<view class="select-currency">
					<view class="title">{{$t('vnode.name7')}}</view>
					<view class="input flex-between" @tap="isSheet = true">
						<view class="" :style="{color:selectValue.name? '#000':'#999'}">
							{{ selectValue.name || $t('vnode.name8')}}
						</view>
						<view class="">
							<u-icon name="arrow-down-fill" color="#999999" size="16"></u-icon>
						</view>
					</view>
				</view>
				<view class="">
					<u-button type="primary" :text="$t('vnode.name9')" shape="circle" color="#00A3FF" :customStyle="{color:'#000'}"
						@click="handlePay"></u-button>
				</view>
			</view>
		</u-popup>
		<u-action-sheet :actions="payInfo" :title="title" :show="isSheet" @close="isSheet = false" :cancelText="$t('vnode.name10')"
			safeAreaInsetBottom @select="handleSelect"></u-action-sheet>
		<pay-board ref="payJP" :showBoard="showBoard" :priceText="money+''" @complete="complete"
			@closeBorad="handleModel" :bottom="150"></pay-board>
		<TabBar :tabBarShow="3"></TabBar>
	</view>
</template>

<script>
	import PayBoard from '@/components/xiaojia-keyBoard/xiaojia-keyBoard.vue'
	import image1 from '@/static/vnode/machine.png'
	export default {
		components: {
			PayBoard
		},
		data() {
			return {
				image1: image1,
				currency: null,
				radiovalue1: 1,
				isSheet: false,
				isPopup: false,
				title: this.$t('vnode.name13'),
				electricityList: [],
				Product: {},
				payInfo: [],
				dayincome: '',
				totalincome: '',
				selectValue: {},
				time: new Date().getTime(),
				money: 0,
				showBoard: false,
				zIndex: -1,
				valid:''
			};
		},
		onLoad() {
			uni.hideTabBar()
		},
		onShow() {
			this.getProduct()
		},
		computed: {
			getRelease() {
				if (this.Product) {
					const num = ((this.Product.amount - this.Product.balance) / this.Product.amount) * 100
					return num.toFixed(2)
				}

			},
			getTime() {
				if (this.Product) {
					const data = ((this.Product.end_time * 1000) - new Date().getTime()) / ((this.Product.end_time - this
						.Product.createtime) * 1000)
					return (data * 100).toFixed(2)
				}

			}
		},
		methods: {
			handleChange(e) {
				console.log(e)
				const val = this.electricityList.find(item => item.id == e)
				this.money = val.money
				this.valid=e
			},
			handleModel() {
				this.zIndex = -1
				this.showBoard = !this.showBoard
			},
			complete(pass) {
				this.showBoard = false
				this.pay(pass)
			},
			async pay(pass) {
				const params = {
					id: this.valid,
					pay_id: this.selectValue.id,
					e_id: this.radiovalue1,
					pay: pass
				}
				this.$fun.showLoading()
				const res = await this.$fun.ajax.post('product/electricity', params)
				uni.hideLoading()
				this.$fun.msg(res.msg)
				if (res.code) {
					setTimeout(() => {
						this.isPopup = false
						this.$fun.jump('/pages/vnode/vnode', 3)
					}, 500)

				}
			},
			async handlePay() {
				if (!this.radiovalue1) return this.$fun.msg(this.$t('vnode.name11'))
				if (!this.selectValue.id) return this.$fun.msg(this.$t('vnode.name12'))
				this.isPopup = false
				this.showBoard = true
			},
			handleSelect(e) {
				this.selectValue = e
			},
			// 获取支付信息
			async getpayInfo() {
				const res = await this.$fun.ajax.post('product/payInfo', {
					type: '2'
				})
				this.payInfo = res.data
			},
			// 获取我的机器人
			async getProduct() {
				const res = await this.$fun.ajax.post('product/userProduct')
				res.data.info.map((item)=>{
					if(item.end_createtime>item.createtime){
						item.end_time=([(Math.round(new Date().getTime()/1000)-item.createtime)/(item.end_createtime-item.createtime)]*100).toFixed(2)
					}
					let data=((item.end_time * 1000) - new Date().getTime()) / ((item.end_time - item.createtime) * 1000)
					item.itemdata=(data * 100).toFixed(2)
					item.num=(((item.amount - item.balance) / item.amount) * 100).toFixed(2)
					// console.log(item.num)
				})
				this.Product = res.data.info
				this.dayincome = res.data.dayincome
				this.totalincome = res.data.totalincome
			},
			handleMachine(id) {
				this.valid=id
				if (this.getTime > 20) return
				this.isPopup = true
				this.getElectricityList()
				this.getpayInfo()
			},
			// 充电列表
			async getElectricityList() {
				const res = await this.$fun.ajax.post('product/electricityList')
				this.electricityList = res.data
				this.money = this.electricityList[0].money
			},
			closePopup() {
				this.isPopup = false
			},
			openPopup() {

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: url(/static/imgbgc.png) no-repeat; background-size: 100% 100%;height: 100%;
	}
	.container-vnode {
		height: 100%;
		::v-deep .u-line-progress {
			overflow: inherit;
		}
		.svga {
			.content {
				width: 1200rpx;
				height: 500rpx;
				position: absolute;
				top: 8%;
				left: 50%;
				transform: translateX(-50%);
				z-index: 999;
			}
		}

		.electric-box {
			height: 650rpx;
			padding: 30rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #232323;
			}

			.select-currency {
				margin: 40rpx 0;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #232323;
					line-height: 24rpx;
					margin-bottom: 20rpx;
				}

				.input {
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 1rpx solid #999999;
					padding: 0 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					// color: #999999;
					line-height: 24rpx;
				}
			}

			.duration {
				margin: 40rpx 0;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #232323;
					line-height: 24rpx;
					margin-bottom: 20rpx;
				}

				.duration-box {
				flex-wrap: wrap;
					.duration-item {
						width: 150rpx;
						height: 90rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 1rpx solid #999999;
						display: flex;
						justify-content: space-between;
						margin: 10rpx 0;

						.lt {
							padding: 10rpx 5rpx;

							.day {
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								font-size: 24rpx;
								color: #19181A;
								line-height: 38rpx;
							}

							.money {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #19181A;
								line-height: 20rpx;
								text-align: center;

							}
						}

						.rt {
							margin-top: 10rpx;
						}
					}
				}
			}
		}

		.main {
			height: 100%;
			padding: 30rpx 0;

			.release {
				position: absolute;
				top: 60rpx;
				right: 20rpx;
				color: #fff;
				width: 250rpx;

				.release-text {
					font-size: 24rpx;
					margin-bottom: 10rpx;
					color: rgba(255, 255, 255, 0.6);
				}
			}

			.income {
				display: inline-block;
				margin-top: 30rpx;
				position: fixed;
				z-index: 1;

				.income-item {
					padding: 10rpx;
					background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent);
					border-left: 10rpx solid #fff;
					border-radius: 5rpx;
					margin: 10rpx 0;

					.lt {
						width: 36rpx;
						height: 50rpx;
					}

					.rt {
						margin-left: 10rpx;

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.6);
							line-height: 23rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.num {
							font-family: DIN, DIN;
							font-weight: bold;
							font-size: 28rpx;
							color: #FFC024;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 10rpx;
						}

					}
				}
			}

			.box {
				position: absolute;
				bottom: 20%;
				left: 0;
				right: 0;
				// margin-top: 40rpx;

				.machine {
					position: relative;
					margin: 0 auto;
					width: 750rpx;
					height: 678rpx;

					.electric {
						position: absolute;
						top: 50rpx;
						left: 50%;
						transform: translate(-50%);
						z-index: 9999;

						.line {
							width: 350rpx;
						}

						.img {
							width: 87rpx;
							height: 87rpx;
							position: absolute;
							left: 70%;
							top: -20rpx;
						}

						.ele-text {
							position: absolute;
							left: 50%;
							top: -80rpx;
							background-color: #fff;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #00A3FF;
							line-height: 28rpx;
							display: inline-block;
							width: 250rpx;
							height: 52rpx;
							line-height: 52rpx;
							border: 1rpx solid #00A3FF;
							text-align: center;

							&:before {
								content: '';
								border: 15rpx solid #00A3FF;
								border-color: #00A3FF transparent transparent transparent;
								position: absolute;
								bottom: -30rpx;
								left: 30%;
							}
						}
					}

					.num {
						position: absolute;
						left: 50%;
						bottom: 3%;
						transform: translateX(-45%);
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 38rpx;
						text-align: center;
					}

				}

				.button {
					width: 360rpx;
					height: 128rpx;
					margin: 20rpx auto;
					.button-text{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						color: #fff;
						font-weight: 700;
						font-size: 40rpx;
					}
				}
			}
		}
	}
</style>